<template>
    <div class="comment">
        <div class="card">
            <div class="title">亲，您的{{billNum}}报销单共享审批已完成，请对这次审批过程给予评价，谢谢~！</div>
            <ul class="emojis box">
                <li class="rank box-f1" v-for="(item, index) in rank" @click="selectRank(index)">
                    <img :src="require('../img/'+ item.img +'-act.png')" v-if="index === activeIndex"
                         class="icon">
                    <img :src="require('../img/'+ item.img +'.png')" v-else class="icon">
                    <p class="text" :class="{active: index === activeIndex}">{{item.text}}</p>
                </li>
            </ul>
        </div>
        <div class="list clear" v-if="activeIndex === 0">
            <div class="text fl">不满意原因：</div>
            <img :src="arrowDown" class="arrow-down fr">
            <div class="value fl select" :class="{warn: activeIndex === 0 || activeIndex === 1}">
                <picker v-if="arr" :data="pickerArr" :choose="unsatisfy" :chooseId="unsatisfyId"
                        :pickName="'name'" :pickIdName="'number'" :textAlign="'left'" ref="picker"
                        @confirm="confirm" class="fl" style="width: 100%;">
                </picker>
            </div>
        </div>
        <textarea id="comment" placeholder="请填写评价内容" v-model="comment" @click="changeHeight($event)"></textarea>
        <div class="btn disabled" @click="debug" v-if="(activeIndex === 0) &&
        (!unsatisfyId || unsatisfy === '其他' && this.comment.length === 0)">提交评价</div>
        <div class="btn" @click="submit" v-else>提交评价</div>
    </div>
</template>

<script>
    import Picker from '../components/picker.vue';
    import { Toast } from 'mint-ui';
    import { mapState } from 'vuex';
    export default {
        components: {
            Picker
        },
        data() {
            return {
                arrowDown: require('../img/arrow-down.png'),
                activeIndex: 3,
                comment: '',
                rank: [
                    {
                        img: 'notsatisfied',
                        text: '不满',
                        result: 3
                    },
                    {
                        img: 'average',
                        text: '一般',
                        result: 2
                    },
                    {
                        img: 'satisfied',
                        text: '满意',
                        result: 1
                    },
                    {
                        img: 'recommend',
                        text: '非常满意',
                        result: 0
                    }
                ],
                arr: [],
                unsatisfy: '',
                unsatisfyId: '',
                pickerArr: [{'name': '请选择', 'number': null, 'fid': null}],
                billNum: this.$route.query.billNum
            };
        },
        computed: {
            ...mapState(['userNum'])
        },
        methods: {
            debug() {
                console.log(this.unsatisfyId);
                console.log(this.comment.length === 0 || !this.unsatisfyId);
            },
            changeHeight(e) {
                var ele = document.getElementById('comment');
                setTimeout(() => { ele.scrollIntoViewIfNeeded(); }, 500);
            },
            loadData() {
                var url = this.HOST + '?method=getUnSatisfactionReasons&sessionID=' + this.SESSIONID;
                this.$http.post(url).then(res => {
                    var arr = [{'name': '请选择', 'number': null}];
                    this.pickerArr = arr.concat(res.data.t);
                });
//                var data = {'code': 200, 't': [{'number': '002', 'name': '\u5355\u636e\u4ed8\u6b3e\u65f6\u95f4\u8fc7\u957f', 'fid': 'wxx+yeQmSXGdPuAIQ1ctiJaK+7I='}, {'number': '004', 'name': '\u5ba1\u6838\u4eba\u5458\u4e13\u4e1a\u7a0b\u5ea6\u4e0d\u9ad8', 'fid': 'RPSCalC+SMmKvRzOxYmq/5aK+7I='}, {'number': '005', 'name': '\u7cfb\u7edf\u5e94\u7528\u6027\u5dee\uff0c\u586b\u5355\u590d\u6742', 'fid': 'bjUlLA8KQDOtgvHztFHOMZaK+7I='}, {'number': '006', 'name': '\u5176\u4ed6', 'fid': 'b0ebmZKxSqGPWj0ZNNKN95aK+7I='}, {'number': '003', 'name': '\u5ba1\u6838\u4eba\u5458\u670d\u52a1\u6001\u5ea6\u4e0d\u4f73', 'fid': 'O9xZstz9SqGB7E5pPrE98paK+7I='}, {'number': '001', 'name': '\u5355\u636e\u5ba1\u6838\u65f6\u95f4\u8fc7\u957f', 'fid': 'KM3qjU3FTnK0QcP+wtinGZaK+7I='}]};
//                var arr = [{'name': '请选择', 'number': null}];
//                this.pickerArr = arr.concat(data.t);
            },
            selectRank(index) {
                this.activeIndex = index;
            },
            confirm(id, name) {
                this.unsatisfy = name;
                this.unsatisfyId = id;
            },
            submit() {
                var chooseType = {
                    'FB': 'ER_BizAccountBill',
                    'CB201': 'ER_TravelAccountBill',
                    'NB': 'Cpt_BizAccountBill',
                    'CP': 'Con_PayBill',
                    'NP': 'NonCon_PayBill'
                };
                var type = this.$route.query.type;
                var evaluateResult = this.rank[this.activeIndex].result;
                var billType = chooseType[type];

                var url = this.HOST + '?method=insertSatisfaction&userNum=' + this.userNum + '' +
                    '&billType=' + billType + '&billNum=' + this.billNum +
                    '&evaluateResult=' + evaluateResult + '&evaluateContent=' + this.comment + '&reasonNum=' + this.unsatisfyId +
                    '&sessionID=' + this.SESSIONID;

                this.$http.post(url).then(res => {
                    Toast({message: '评价成功', duration: 2000});
                    setTimeout(() => {
                        this.$router.replace('/mybaoxiao?index=5');
                        window.history.go(-1);
                    }, 2000);
                });
            }
        },
        created() {
            this.loadData();
        }
    };
</script>

<style lang="less" scoped>
    @import "../css/var.less";

    .comment {
        height: 100%;
        overflow: hidden;
        .card {
            padding: .28rem;
            border-bottom: 1px solid #e0e0e0;
            .title {
                margin-bottom: .43rem;
            }
            .emojis {
                padding: 0 1.2rem;
                margin-bottom: .15rem;
                text-align: center;
                font-size: @sub-title-fsize;
                color: @text-color3;
                img {
                    width: .8rem;
                    margin-bottom: .2rem;
                }
                .text {
                    &.active {
                        color: @text-color1;
                    }
                }
            }
        }
        .list {
            display: block;
            .text {
                color: @text-color3;
            }
            .value {
                &.warn {
                    color: @warn-color;
                }
            }
            .select {
                width: 60%;
                margin-right: .2rem;
            }
            img {
                width: .3rem;
                height: .15rem;
                margin-top: .1rem;
            }
        }
        textarea {
            width: 100%;
            height: 2.5rem;
            padding: .28rem;
        }
    }
</style>
